<template>
  <div class="head-count">
    <div class="count-panel">
      <div class="panel-title">
        <img class="panel-icon" src="~@/assets/img/overview/auto.png">
        <span>收运量</span>
      </div>
      <div class="panel-content">
        <div class="content-item">
          <span class="sm-title">今日</span>
          <span class="data">{{ todaySyWeight }}</span>
          <span class="unit">吨</span>
        </div>
        <div class="content-item">
          <span class="sm-title">近7日</span>
          <span class="data">{{ weekSyWeight }}</span>
          <span class="unit">吨</span>
        </div>
      </div>
    </div>
    <div class="count-panel">
      <div class="panel-title">
        <img class="panel-icon" src="~@/assets/img/overview/call.png">
        <span>报警次数</span>
      </div>
      <div class="panel-content">
        <div class="content-item">
          <span class="sm-title">近7日</span>
          <span class="data">{{ weekAlarmCount }}</span>
          <span class="unit">次</span>
        </div>
        <div class="content-item">
          <span class="sm-title">近30日</span>
          <span class="data">{{ monthAlarmCount }}</span>
          <span class="unit">次</span>
        </div>
      </div>
    </div>
    <div class="count-panel">
      <div class="panel-title">
        <img class="panel-icon" src="~@/assets/img/overview/total.png">
        <span>新增污水池数量</span>
      </div>
      <div class="panel-content">
        <div class="content-item">
          <span class="sm-title">近7日</span>
          <span class="data">{{ weekContainerCount }}</span>
          <span class="unit">个</span>
        </div>
        <div class="content-item">
          <span class="sm-title">总量</span>
          <span class="data">{{ containerCount }}</span>
          <span class="unit">个</span>
        </div>
      </div>
    </div>
    <div class="count-panel">
      <div class="panel-title">
        <img class="panel-icon" src="~@/assets/img/overview/weight.png">
        <span>新增收运车辆数量</span>
      </div>
      <div class="panel-content">
        <div class="content-item">
          <span class="sm-title">近7日</span>
          <span class="data">{{ weekCarCount }}</span>
          <span class="unit">个</span>
        </div>
        <div class="content-item">
          <span class="sm-title">总量</span>
          <span class="data">{{ carCount }}</span>
          <span class="unit">个</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/timeUtils.js'
export default {
  data () {
    return {
      todaySyWeight: '',
      weekSyWeight: '',
      weekAlarmCount: '',
      monthAlarmCount: '',
      weekContainerCount: '',
      containerCount: '',
      weekCarCount: '',
      carCount: ''
    }
  },
  mounted () {
    const now = new Date()
    this.getSyWeight(formatDate(now, 'yyyy-MM-dd 00:00:00'), 'todaySyWeight')
    const week = new Date(now.getTime() - 24 * 3600000 * 7)
    this.getSyWeight(formatDate(week, 'yyyy-MM-dd 00:00:00'), 'weekSyWeight')

    this.getAlarmTotal(formatDate(week, 'yyyy-MM-dd 00:00:00'), 'weekAlarmCount')
    const month = new Date(now.getTime() - 24 * 3600000 * 30)
    this.getAlarmTotal(formatDate(month, 'yyyy-MM-dd 00:00:00'), 'monthAlarmCount')

    this.getContainerTotal(formatDate(week, 'yyyy-MM-dd 00:00:00'), 'weekContainerCount')
    this.getContainerTotal('', 'containerCount')

    this.getCarTotal(formatDate(week, 'yyyy-MM-dd 00:00:00'), 'weekCarCount')
    this.getCarTotal('', 'carCount')
  },
  methods: {
    getSyWeight(time, prop) {
      this.$http({
        url: this.$http.adornUrl('/sign/signcardispatch/weightTotal'),
        method: 'post',
        data: this.$http.adornData({
          startTime: time
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this[prop] = data.total || 0
        }
      })
    },
    getAlarmTotal(time, prop) {
      this.$http({
        url: this.$http.adornUrl('/sign/signcontaineralarm/total'),
        method: 'post',
        data: this.$http.adornData({
          startTime: time
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this[prop] = data.total || 0
        }
      })
    },
    getContainerTotal(time, prop) {
      this.$http({
        url: this.$http.adornUrl('/sign/signcontainer/total'),
        method: 'post',
        data: this.$http.adornData({
          startTime: time
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this[prop] = data.total || 0
        }
      })
    },
    getCarTotal(time, prop) {
      this.$http({
        url: this.$http.adornUrl('/sign/signcar/total'),
        method: 'post',
        data: this.$http.adornData({
          startTime: time
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this[prop] = data.total || 0
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.head-count {
  padding: 15px;
  border-radius: 5px;
  background: #fff;
  display: flex;
  // justify-content: space-between;
  justify-content: flex-start;
  align-items: center;
  .count-panel {
    // width: calc(25% - 10px);
    width: 270px;
    margin-right: 15px;
    background: url(~@/assets/img/common/box-bg.png) no-repeat;
    background-size: 60% 100%;
    background-color: #35a7ff;
    padding: 0 13px ;
    color: #fff;
    border-radius: 5px;
    .panel-title {
      margin-top: 10px;
      font-size: 22px;
      line-height: 50px;
      font-weight: bold;
      .panel-icon {
        height: 40px;
      }
    }
    .panel-content {
      display: flex;
      justify-content: space-between;
      .content-item {
        line-height: 60px;
        .sm-title {
          font-size: 15px;
          color: #fff;
        }
        .data {
          margin-left: 6px;
          font-size: 24px;
          font-weight: bold;
        }
        .unit {
          font-size: 15px;
          color: #fff;
        }
      }
    }
    &:nth-of-type(2) {
      background-color: #ff816c;
    }
    &:nth-of-type(3) {
      background-color: #6e6bfe;
    }
    &:nth-of-type(4) {
      background-color: #ee4dad;
    }
    &:nth-of-type(5) {
      background-color: #1cc945;
    }
  }
}
</style>